<template>
	<div class="paySuccess" v-if="Object.keys(orderInfo).length>0">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center px-2">
			<div class=""> 
				<el-button type="text" @click="$router.go(-1)">
                    <div class="iconfont icon-back fs-xxl text-white"></div>
                </el-button>
			</div>
			<div class="">
				
			</div>
			<div class="fs-xl text-white pr-2" @click="$router.push('/botUi')">
				在线客服
			</div>
		</div>
        <!-- 订单状态 -->
		<div class="pb-3 d-flex px-3 text-white fs-xxxl py-3 mt-3 my-3">  
			<div @click="wuliu">{{title}}</div>
			<div class="iconfont icon-right pl-2 fs-md"></div>
		</div>
        <!-- 订单提示信息 -->
        <div class="alert bg-white mx-2 pt-3 mt-3 my-3 px-3">
			<div class="fs-xxl py-2">疫情特殊期，预计会有延迟</div>
			<div class="text-grey pt-1 fs-sm pb-2">疫情特殊期订单火爆，预计会延迟，感谢您的理解</div>
			<div class="d-flex py-3">
				<div v-if="title != '待支付'" class="pr-2">
					<el-button size="mini" type="" @click="kuai" class="">催单</el-button>
				</div>
				<router-link :to="'/orderPay/'+id" v-if="title == '待支付'" class="pr-2">
					<el-button size="mini" type="danger" class="">去支付</el-button>
				</router-link>
				<div><el-button size="mini" type="" @click="share">分享有券</el-button></div>
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="bg-white px-3 mx-2 alert">
			<div class="py-3 border-bottom">天院旗舰店</div>
			<div class="d-flex border-bottom" v-for="(item,i) in orderInfo.goods">
				<div class="pr-2 py-2">
					<van-image
					style="width: 80px; height: 80px"
					:src="item.image"
					fit="cover">
				</van-image>
				</div>
				<div class="flex-1 py-2">
					<div>{{item.name}}</div><div class="text-grey"></div>
					<div class="d-flex jc-between pt-3 mt-3">
						<div class="fs-xl" style="font-weight: bold;">￥{{item.price/100}}</div>
						<div>×{{item.num}}</div>
					</div>
				</div>
				
			</div>
			<div class="border-bottom py-1 text-grey">
				<div class="d-flex jc-between py-1">
					<div>商品金额</div><div>￥{{orderInfo.order.payMoney/100}}</div>
				</div>
				<div class="d-flex jc-between py-1">
					<div>运费</div><div>￥0.00</div>
				</div>
			</div>
			<div class="d-flex jc-between py-3 fs-md border-top">
				<div>金额合计</div><div class="text-pink">￥{{orderInfo.order.payMoney/100}}</div>
			</div>
		</div>

		<div class="alert bg-white mx-2 py-3 mt-3 my-3">
			
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>订单编号</div>
				<div class="text-dark">{{orderInfo.order.id}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>收货人</div>
				<div class="text-dark">{{orderInfo.order.consignee}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>联系电话</div>
				<div class="text-dark">{{orderInfo.order.consigneePhone}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>收货地址</div>
				<div class="text-dark">{{orderInfo.order.consigneeAddress}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>支付方式</div>
				<div class="text-dark">支付宝</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2 mb-2">
				<div>备注</div>
				<div class="text-dark">{{orderInfo.order.buyerMessage}}</div>
			</div>
			
		</div>
	</div>
</template>

<script>
import { Toast } from "mint-ui";
	export default {
		props: ['id'],
		data(){
			return {
                url: '',
                orderInfo: {
                	order: {},
                	goods: []
                },
                status: '',
                title: '',
			}
		},
		watch: {
			status(n) {
				switch (n) {
					case "1":
					this.title = "待支付";
					break;
					case "2":
					this.title = "待发货";
					break;
					case "3":
					this.title = "待收货";
					break;
					case "4":
					this.title = "待评价";
					break;
					default:
					this.title = "全部订单";
				}
			}
		},
		methods: {
			wuliu(){
				if (this.status === '2') {
					this.$router.push('/order/logistics/'+this.id)
				}
				
			},
			kuai(){
				Toast("催单成功")
			},
			share(){
				Toast("未支持分享")
			},
           async getOrderInfo(){
             const res = await this.$http.get(`order/findOrderById.do?id=${this.id}`)
              if (res.data.code != 0) {
              	this.orderInfo = res.data;
              	this.status = res.data.order.orderStatus;
              }else {
              	Toast('订单不存在！')
              }
          }
		},
		created(){
			this.getOrderInfo();
		},
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background: linear-gradient(to bottom,rgba(227, 38, 57,1),rgba(250,250,250,1));height: 58rem;')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
	}
</script>

<style lang="scss" scoped>
    .nav_top {
    	background-color: #e53748;
    	border-bottom: 1px solid #e53748;
    }
	.alert {
		border-radius: 1%;
	}
	.el-button {
		width: 98%;
	}
	.alert {
		border-radius: 1%;
	}
</style>